
import React, { Component } from 'react'
import {Form , Input ,Row, Col , Select , Button , Image , message} from "antd"
import { annoTypeList } from '../../utils';
import { UploadOutlined } from '@ant-design/icons';
import { ajax } from '../../api';
import { baseURL } from '../../api/ajax';
import "./index.scss"
const {Option} = Select 

export default class NoticeAdd extends Component {
    state = {
        imgUrl:""
    }
    submitForm = (value)=>{
        ajax.addnotice({
            ...value,
        })
        .then(res=>{
            if(res.code==200){
                this.props.history.push("/main/notice/list")
            }
        })
    }
    startSendFile=()=>{
        var file = this.file.files[0]
        var data = new FormData()
        data.append("img",file)
        ajax.uploadfileimg(data)
        .then(res=>{
            if(res.code==200){
                this.setState({
                    imgUrl:res.result
                })
                this.addForm.setFieldsValue({
                    img:res.result
                })
            }
        })

    }
    uploadFile=()=>{
        this.file.click()
    }
    onFinishFailed=()=>{
        message.error('请输入有效的通告信息');
    }
    render() {
        return (
            <div>
                <h2 style={{marginBottom:"10px"}}>添加通告</h2>
                <Row>
                    <Col span={12}>
                        <Form 
                            name="addForm"
                            ref={el=>this.addForm=el}
                            layout="vertical"
                            onFinish = {this.submitForm}
                            onFinishFailed = {this.onFinishFailed}
                            className="myannoform"
                        >
                            <Form.Item
                                label="通告标题"
                                name="title"
                                rules={[
                                    { required: true, message: '请输入' },
                                ]} 
                            >
                                <Input placeholder="请输入" ></Input>
                            </Form.Item>
                            <Form.Item
                                label="通告内容"
                                name="content"
                                rules={[
                                    { required: true, message: '请输入' },
                                ]} 
                            >
                                <Input.TextArea  rows={6}  placeholder="请输入" />
                            </Form.Item>
                            <Form.Item
                                label="通告分类"
                                name="category"
                                rules={[
                                    { required: true, message: '请选择' },
                                ]} 
                            >
                                <Select
                                    placeholder="请选择"
                                    allowClear
                                >
                                    {
                                        annoTypeList.map((l,i)=>(
                                            <Option  value={l.type} key={i}>
                                                {l.title}
                                            </Option>
                                        ))
                                    }
                                </Select>
                            </Form.Item>
                            <Form.Item
                                label="通告图片"
                                name="img"
                                rules={[
                                    { required: true, message: '请上传' },
                                ]} 
                            >   
                                {this.state.imgUrl &&  <Image width={'100%'} height={160} style={{borderRadius:8,margin:"10px 0 "}} src={this.state.imgUrl.replace(/public/,baseURL)}></Image>  }
                                <input type="file" onChange={this.startSendFile} ref={el=>this.file=el} style={{display:'none'}}  />
                                <Button icon={<UploadOutlined />}  onClick={this.uploadFile}>点击添加通告图片</Button>
                            </Form.Item>

                            <Form.Item
                            >
                                <Button type="danger" htmlType="submit">添加通告</Button>
                            </Form.Item>
                        </Form>
                    </Col>
                </Row>
            </div>
        )
    }
}
